<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <script src="js/musiclist.js"></script>
    <script src="js/music.js"></script>
    <link rel="stylesheet" href="CSS/index.css">
</head>

<body>
    <!-- 音乐播放器 -->
    <div class="music_player">
        <!-- 播放主体 -->
        <div class="music_main">
            <!-- 模糊背景 -->
            <div class="bg_blur"></div>
            <!-- 唱片圆盘 -->
            <div class="round">
                <!-- 唱片图片 -->
                <img src="https://y.qq.com/music/photo_new/T002R300x300M000000jcKFG0sQrD0_1.jpg?max_age=2592000" alt="" class="round_img">
                <!-- 唱片指针 -->
                <img src="http://jsdown.92wailian.com/js228/images/cd_tou.png" alt="" class="round_pointer">
            </div>
            <!-- 歌曲信息 -->
            <div class="music_message">
                <!-- 歌手 歌名-->
                <h3>匿名的好友</h3>
                <p>杨丞琳</p>
                <!-- 播放器 控件 -->
                <div class="music_control">
                    <!-- 上一首 -->
                    <a href="javascript:void(0)" id="prve">&#xe6b0;</a>
                    <!-- 播放 暂停 -->
                    <a href="javascript:void(0)" id="start">&#xe6a4;</a>
                    <!-- 下一首 -->
                    <a href="javascript:void(0)" id="next">&#xe6b0;</a>
                    <!-- 单曲循环 -->
                    <a href="javascript:void(0)" id="circum">&#xe66c;</a>
                    <!-- 音量 -->
                    <a href="javascript:void(0)" id="volume">&#xea0c;</a>
                    <!-- 音量条 -->
                    <input type="range" name="" id="vol" min="0" max="1" value="0" step="0.1">
                    <!-- 进度条 -->
                    <input type="range" name="" id="pro_bar" max="0" value="0" step="0.1">
                    <!-- 歌曲时间 -->
                    <div class="music_time">
                        <span class="up_time">00:00</span>
                        <span class="max_time">04:22</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 歌曲列表 -->
        <div class="music_list">
            <ul>
                <li><span class="music_icon active">&#xe61c;</span>匿名的好友</li>
                <li><span class="music_icon">&#xe61c;</span>Smokin Out The Window</li>
                <li><span class="music_icon">&#xe61c;</span>达尔文</li>
            </ul>
        </div>
        <audio src="https://nc01-sycdn.kuwo.cn/4d8bc89b06cc051a9f9f1fe08933b796/641d8c64/resource/n3/28/53/626179254.mp3" controls></audio>
    </div>
</body>

</html>